<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>W3Schools Tutorials</title>
</head>
<body>

	<h1> 1st JavaScript Tutorial</h1>
	
	<script type = "text/javascript">
		
		function addDate(){
		document.getElementById("demo").innerHTML = Date();
		}
		
		
		function turn(){
			var img = document.getElementById("img");
			
			if(img.src.match("bulboff"))
				img.src = "bulbon.gif";
			else
				img.src = "bulboff.gif";
		}
		
		function changeStyle(){
			
			var text = document.getElementById("demo2");
			text.style.fontSize = "20px";
			text.style.color = "red";
		}
		
		function validate(){
			
			var num = document.getElementById("demo3").value;
			var res;
			if(isNaN(num) || num < 1 || num > 10 )
				res = "Invalid Input :(";
			else 
				res = "OK, valid Input :)";
			
			document.getElementById("msg").innerHTML = res;
		}
	</script>
	
	
	<button onClick = "addDate()">Date</button>
	<button onClick = "changeStyle()">Change Color and Size</button>
	
	<img src = "bulboff.gif" id = "img" onClick = "turn()">
	<p id = "demo"> Change HTML Element</p>
	<p id = "demo2"> Change HTML Element's Font and Color </p>
	Plz Enter a number from 1 to 10 only !!
	<input type = "text" id = "demo3"> <button onClick ="validate()"> Submit</button> <span id = "msg"></span>
</body>
</html>